import { extendTheme } from "@chakra-ui/react";

// 自定义主题
const theme = extendTheme({
  config: {
    initialColorMode: "dark", // 设置为深色模式
    useSystemColorMode: false, // 关闭使用系统主题的功能
  },
  colors: {
    brand: {
      50: "#f7fafc",
      100: "#edf2f7",
      200: "#e2e8f0",
      300: "#cbd5e0",
      400: "#a0aec0",
      500: "#718096",
      600: "#4a5568",
      700: "#2d3748",
      800: "#1a202c",
      900: "#171923",
    },
    deepBlue: {
      500: "#0066FF", // 浅蓝色主色调
      600: "#0052CC", // 浅蓝色悬停状态
    },
    // 覆盖默认的蓝色
    blue: {
      50: "#ebf8ff",
      100: "#bee3f8",
      200: "#90cdf4",
      300: "#63b3ed",
      400: "#4299e1",
      500: "#0066FF", // 将默认的蓝色改为 #0066FF
      600: "#0052CC",
      700: "#2b6cb0",
      800: "#2c5282",
      900: "#2a4365",
    },
  },
  styles: {
    global: (props: any) => ({
      "html, body": {
        bg: "gray.800", // 使用Chakra UI的灰色深色背景
        color: "gray.50", // 使用浅色文本
      },
      "*": {
        // 确保所有元素继承背景和颜色
        borderColor: "white",
      },
      "div, p, h1, h2, h3, h4, h5, h6, span": {
        color: "inherit", // 继承父元素的颜色
      },
      ".chakra-ui-dark": {
        bg: "gray.800",
      },
      // 全局覆盖单选框和复选框样式
      ".chakra-checkbox__control": {
        borderColor: "#0066FF !important",
        "&[data-checked]": {
          bg: "#0066FF !important",
          borderColor: "#0066FF !important",
        },
      },
      ".chakra-radio__control": {
        borderColor: "#0066FF !important",
        "&[data-checked]": {
          bg: "#0066FF !important",
          borderColor: "#0066FF !important",
          "&::before": {
            bg: "white !important",
          },
        },
      },
      // 全局覆盖 Switch 组件样式
      ".chakra-switch__track[data-checked]": {
        bg: "#0066FF !important",
      },
      ".chakra-switch__thumb": {
        bg: "white",
      },
    }),
  },
  semanticTokens: {
    colors: {
      text: {
        default: "gray.50",
        _dark: "gray.50",
      },
      bg: {
        default: "gray.800",
        _dark: "gray.800",
      },
    },
  },
  components: {
    Checkbox: {
      baseStyle: {
        control: {
          borderColor: "#0066FF",
          _checked: {
            bg: "#0066FF !important",
            borderColor: "#0066FF !important",
            color: "white",
            _hover: {
              bg: "#0052CC !important",
              borderColor: "#0052CC !important",
            },
          },
        },
      },
      defaultProps: {
        colorScheme: "blue",
      },
    },
    Radio: {
      baseStyle: {
        control: {
          borderColor: "#0066FF",
          _checked: {
            bg: "#0066FF !important",
            borderColor: "#0066FF !important",
            _before: {
              content: '""',
              display: "inline-block",
              pos: "relative",
              w: "50%",
              h: "50%",
              borderRadius: "50%",
              bg: "white !important",
            },
            _hover: {
              borderColor: "#0052CC !important",
            },
          },
        },
      },
      defaultProps: {
        colorScheme: "blue",
      },
    },
    Switch: {
      baseStyle: {
        track: {
          _checked: {
            bg: "#0066FF",
          },
        },
      },
      defaultProps: {
        colorScheme: "blue",
      },
    },
  },
});

export default theme;
